<!--  -->
<template>
  <a-modal :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel"
    :ok-button-props="{ props: { disabled: operationDisabled } }">
    <a-form-model ref="ruleForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="用户名" ref="username" prop="username">
        <a-input placeholder="请输入用户名" allowClear v-model="model.username" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="手机号码" ref="phone" prop="phone">
        <a-input placeholder="请输入手机号码" allowClear v-model="model.phone" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="昵称" ref="nickname" prop="nickname">
        <a-input placeholder="请输入昵称" allowClear v-model="model.nickname" />
      </a-form-model-item>
      <a-form-model-item label="电子邮箱" ref="email" prop="email">
        <a-input placeholder="请输入电子邮箱" allowClear v-model="model.email" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="密码" v-if="passwordDisabled" ref="passwordVo" prop="passwordVo">
        <a-input-password placeholder="请输入密码" allowClear v-model="model.passwordVo" />
      </a-form-model-item>

      <a-form-model-item label="状态" ref="enabled" prop="enabled">
        <!-- <a-radio-group name="radioGroup" v-model="model.enabled">
          <a-radio :value="0"> 启用 </a-radio>
          <a-radio :value="1"> 禁用 </a-radio>
        </a-radio-group> -->
        <a-select placeholder="使用状态" v-model="model.enabled">
          <a-select-option :value="0"> 启用 </a-select-option>
          <a-select-option :value="1"> 禁用 </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" ref="roles" prop="roles">
        <a-select v-model="model.roles" mode="multiple" style="width: 100%" placeholder="请选择角色">
          <a-select-option v-for="value in data" :key="value.id">
            {{ value.roleName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as AesUtil from "@/utils/AesUtil";
import { model, rules } from "./save";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Modal",
  props: {
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        detail: "/admin_server/uc/auth/user/", // 详情
        save: "/admin_server/uc/auth/user/save", // 新增
        update: "/admin_server/uc/auth/user/update", // 修改
        rsaPublicKey: "/admin_server/oauth/rsaPublicKey", // rsa公钥获取接口
      },
      visible: false,
      confirmLoading: false,
      model,
      rules,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      disabled: false,
      passwordDisabled: true,

      title: undefined,
      id: undefined,
      data: undefined,
      operationDisabled: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.model.id) {
            this.$request
              .postRequest2(this.api.update, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success("更新成功");
                  this.$emit("handleOk");
                }
                this.confirmLoading = false;
              });
          } else {
            this.$request.getRequest1(this.api.rsaPublicKey).then((rsa) => {
              // AES密钥
              let aeskey = AesUtil.createAesKey();
              const passwordVo = this.model.passwordVo;
              this.model.passwordVo = AesUtil.AESEncrypt(
                this.model.passwordVo,
                aeskey
              );
              this.model.encryptKey = AesUtil.RSAEncrypt(aeskey, rsa.result);
              this.$request
                .postRequest2(this.api.save, this.model)
                .then((res) => {
                  if (res.success) {
                    this.$message.success("添加成功");
                    this.$emit("handleOk");
                  } else {
                    this.model.passwordVo = passwordVo;
                  }
                  this.confirmLoading = false;
                });
            });
          }
        }
      });
    },
    resetForm() {
      Object.keys(this.model).forEach((key) => (this.model[key] = ""));
      this.model.enabled = 0;
      this.model.roles = [];
      this.disabled = false;
      this.passwordDisabled = true;
    },
    init(id, operationDisabled, title, roleData) {
      this.title = title
      this.operationDisabled = operationDisabled
      this.data = roleData
      this.visible = true
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
      if (id) {
        this.confirmLoading = true;
        this.disabled = true;
        this.passwordDisabled = false;
        this.$request.getRequest1(this.api.detail + id).then((res) => {
          if (res.success) {
            this.model.id = res.result.id
            this.model.username = res.result.username
            this.model.nickname = res.result.nickname
            this.model.phone = res.result.phone
            this.model.email = res.result.email
            this.model.enabled = res.result.enabled
            this.model.roles = [];
            res.result.roleDtoList.forEach((x) => {
              this.model.roles.push(x.id);
            });
          }
          this.confirmLoading = false;
        });
      } else {
        this.resetForm();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>

</style>